<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>活动场次关联商品页面</title>
<link rel="stylesheet"
	href="/wk1un2_electricity_digital/Backstage/layui/css/layui.css" />
</head>

<body>

	<div class="layui-form" style="margin-top: 20px;" onsubmit="false">
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-inline">
				<input type="text" name="p_id" id="p_id" placeholder="请输入活动商品名称"
					class="layui-input">
			</div>
			<label class="layui-form-label">活动名称</label>
			<div class="layui-input-inline">
				<input type="text" name="as_id" id="as_id" placeholder="请输入活动场次名称"
					class="layui-input">
			</div>
			<button class="layui-btn" id="search" data-type="reload">查询</button>
		</div>
	</div>
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<!--数据表格-->
	<script type="text/html" id="toolbarDemo">
			<!--表头上面引入了一个商品活动的操作-->
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="addUser">添加活动场次商品</button>
			</div>
		</script>
		
		 <script type="text/html" id="p_parcateTpl1">
      {{#  if(d.p_id == 1){ }}
          <span style="color: #F581B1;">HUAWEI Mate 40 Pro 5G 全网通</span>
      {{#  } else if(d.p_id == 2){ }}
          <span style="color: #1e9fff;">荣耀Play4</span>
    {{#  } else if(d.p_id == 3){ }}
          <span style="color: #08f55f;">HUAWEI MateBook X</span>
      {{#  }else if(d.p_id == 4){ }}
          <span style="color: #08f55f;">荣耀MagicBook Pro</span>
      {{#  }else if(d.p_id == 5){ }}
          <span style="color: #08f55f;">华为MatePad Pro</span>
      {{#  }else if(d.p_id == 6){ }}
          <span style="color: #08f55f;">荣耀平板V6</span>
      {{#  }else if(d.p_id == 7){ }}
          <span style="color: #08f55f;">华为FreeBuds 3</span>
      {{#  }else if(d.p_id == 8){ }}
          <span style="color: #08f55f;">华为mini蓝牙音箱</span>
      {{#  } }}
  </script>
		
		
			 <script type="text/html" id="p_parcateTpl">
      {{#  if(d.as_id == 1){ }}
          <span style="color: #F581B1;">限时特卖</span>
      {{#  } else if(d.as_id == 2){ }}
          <span style="color: #1e9fff;">每日疯抢</span>
    {{#  } else if(d.as_id == 3){ }}
          <span style="color: #08f55f;">欢乐双十二</span>
      {{#  } }}
  </script>
		
	<script type="text/html" id="barDemo">
			<!--在表格的行内加的工具-->
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
	<!--检查js文件是否引入成功-->
	<script type="text/javascript"
		src="/wk1un2_electricity_digital/Backstage/layui/layui.js"></script>
	<script>
		layui.use('table',function() {
			      var $ = layui.jquery,
			      table = layui.table;
							table.render({
										elem : '#test',
										toolbar : '#toolbarDemo',
										url : '/wk1un2_electricity_digital/Backstage/getAllActivityProduct',
										where : {
											method : 'getAll',
											p_id : '',
											as_id : ''
										},
										method : 'POST',
										cols : [ [ {
											type : "checkbox",
											fixed:'left',
											width : 50
										}, {
											field : 'actp_id',
											width : 160,
											title : '商品场次编号',
											fixed:'left',
											sort : true,
											align : "center"
										}, {
											field : 'p_id',
											width : 250,
											title : '商品名称',
											templet : '#p_parcateTpl1',
											align : "center"
										},{
											field : 'as_id',
											width : 280,
											title : '活动名称',
											templet : '#p_parcateTpl',
											align : "center"
										},{
											field : 'p_price',
											width : 180,
											title : '商品价格',
											align : "center"
										},{
											title : '操作',
											width : 150,
											toolbar : '#barDemo',
											fixed:'right',
											align : "center"
										} ] ],
										id : 'testReload',
										page : true

									});
							//添加
							table.on('toolbar(test)', function(obj) {
								switch (obj.event) {
								case 'addUser':
									layer.open({
										type : 2,
										area : [ '500px', '500px' ],
										content : 'ActivityProduct_add.jsp',
										title : '添加',
										end : function() {
											window.location.reload();
										}
									});
									break;
								}
								;
							});
							//删除
							//监听行工具事件
							table.on('tool(test)', function(obj) {
								if (obj.event === 'del') {
									layer.confirm('真的删除行么', function(index) {//删除弹框
										console.log('执行删除');
										console.log(obj.data);
										var url = '/wk1un2_electricity_digital/Backstage/deleteActivityProduct';
										$.post(url, {
											"actp_id" : obj.data.actp_id,
											method : 'delete'
										}, function(data) {
											console.log(data);
											if (data.count > 0) {
												console.log('删除成功');
												window.location.reload();
											}
										}, "json");
									});
								} else if (obj.event === 'edit') {
									console.log(obj.data);
									layer.open({
										type : 2,
										area : [ '500px', '500px' ],
										content : 'ActivityProduct_update.jsp',
										title : '编辑',//修改
										success : function(layero, index) {
											var body = layer.getChildFrame('body',index);
											body.contents().find("#actp_id").val(obj.data.actp_id);
											body.contents().find("#p_id").val(obj.data.p_id);							
											body.contents().find("#as_id").val(obj.data.as_id);										
										},
										end : function() {
											window.location.reload();
										}
									});
								}
							});
							$('#search').on('click', function() {
								var p_id = $("#p_id").val();
								var as_id = $("#as_id").val();
								table.reload('testReload', {//testReload,是上面渲染表格的id
									where : {//接口需要的两个请求参数
										'p_id' : p_id,
										'as_id' : as_id
									}
								});
							});
						});
					</script>
</body>


</html>